<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-form-label {
            width: 60px;
            padding: 0px;
            text-align: left;
            height: 45px;
            line-height: 45px;
            font-size: 15px;
        }

        .layui-input-block {
            margin-left: 75px;
        }

        .layui-input {
            height: 45px;
            font-size: 15px;
        }

        .bottom {
            line-height: 0px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .button-container {
            position: absolute;
            right: 20px;
        }

        .pear-btn {
            border-radius: 4px;
            font-size: 18px;
        }

        .dtree-select {
            width: 99.5%;
            top: 46px
        }

        .pear-btn i {
            font-size: 15px;
        }

        .dtree-nav-item {
            padding-left: 0px;
        }

        #dataTree {
            padding-top: 5px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label required">角色名</label>
                    <div class="layui-input-block">
                        <input type="text" id="roleName" name="roleName" required="" placeholder="请输入角色名"
                               lay-verify="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" placeholder="请输入角色描述" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单分配</label>
                    <div class="layui-input-block">
                        <input type="hidden" id="roleId">
                        <ul id="dataTree" class="dtree" data-id="0"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" style="margin-right: 20px" class="pear-btn pear-btn-primary"
                    lay-submit="" lay-filter="role-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['dtree', 'form', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;

        let Dtree = dtree.render({
            elem: "#dataTree",
            initLevel: "1",//默认展开层级为1
            width: "100%",
            method: 'get',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
            url: "/my/role/build",
            dataFormat: "list",  //配置data的风格为list
            checkbar: true,  //开启复选框
            checkbarType: "all"
        });
        form.verify({
            name: function (value) {
                if (value.length < 2) {
                    return '角色名至少2个字符';
                }
            }
        });
        form.on('submit(role-save)', function (data) {
            // 获取复选框数组数据
            var paramJsonArr = Dtree.getCheckbarJsonArrParam();
            var ids = paramJsonArr["nodeId"]
            var datas = data.field
            datas['menuIds'] = ids
            let loading = layer.load();
            $.ajax({
                url: '/my/role/add/save',
                data: JSON.stringify(datas),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1800}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("testReload");
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1800});
                    }
                }
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>